<template>
	<view class="container">
		
		<button style="height: 50px;width: '100%';" @click="changeEditState">{{editStateString}}</button>
		
		<view class='referenceText'>点击查看，长按分享</view>
		<uni-file-picker 
			v-model="imageValue"  
			file-mediatype="image"
			mode="grid"
			file-extname="png,jpg"
			:limit="18"
			:fil="images"
			@progress="progress" 
			@success="success"
			@fail="fail" 
			@select="select"
			@delete="deleted"
			:del-icon='editState'
			@longpress="shareToggle"
			:auto-upload='true'
		/>
		 
		<view>
			<!-- 长按分享弹窗 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
		<!-- 暂无可编辑图片弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000" style="text-align: center;"/>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				images:[],
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				editState:false,
				editStateString:'编辑',
				imageCurrentNum:0
				
			}
		},
		onReady() {},
		methods: {
			select(){
				this.imageCurrentNum++;
			},
			deleted(){
				this.imageCurrentNum--;
			},
			shareToggle() {
				this.$refs.share.open()
			},
			changeEditState(){
				
				if(this.editState)	//编辑状态
				{
					this.editState = false;
					this.editStateString = '编辑'
				}
				else{	//未编辑
					if(this.imageCurrentNum == 0){
						
						this.messageToggle('error');
						return;
					}
					this.editState = true;
					this.editStateString = '完成'
				}
			},
			messageToggle(type) {
				this.msgType = type
				this.messageText = `暂无可编辑的图片`
				this.$refs.message.open()
			}
		}
	}
</script>
<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
	.referenceText{
		text-align: center;
		font-size: 12px;
		color:  #969696;
		margin: 10px;
	}
</style>




